<template>
	<div class="head" :style="'padding-top: ' + statusBarHeight + 'px;'">
		<div class="warp">
			<!-- <div class="location">
				<image src="../static/icons/nav-more.png" mode=""></image>
			</div> -->
			<div class="search" @click="toSearch()">
				<image src="../static/icons/search.png" mode=""></image>
			</div>
			<div class="nav-tab" :style="'margin-left:-'+(wxMenuButtonWidth / 2)+'px'">
				<div v-for="(item,index) in list" :key="index" :class="['nav-item',current == index?'active':'']"
					@click="changeItem(index)">
					{{item}}
				</div>
			</div>
			<div class="search" @click="toSearch()" style="opacity: 0;">
				<image src="../static/icons/search.png" mode=""></image>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				current: 0,
				list: ['关注', '发现', '附近', '福利']
			};
		},
		props: {
			currentCity: {
				type: String,
				default: () => {
					return '广州市';
				}
			},
			currentInit: {
				type: Number,
				default: () => {
					return 0;
				}
			}
		},
		computed: {
			...mapState(['statusBarHeight', 'areaId', 'wxMenuButtonWidth'])
		},
		watch: {
			areaId(val) {
				// console.log("导航的定位地址",val);
				// this.location.name = this.areaId.name
				this.$nextTick(function() {
					//获取直接赋值
					this.location = uni.getStorageSync('areaId');
				})
			}
		},
		mounted() {
			//获取直接赋值
			this.current = this.currentInit
			this.location = uni.getStorageSync('areaId');
			this.getLocation()
		},
		methods: {
			...mapMutations([
				'setAreaId'
			]),
			changeItem(index) {
				if (index == 3) {
					this.$toast.msg('暂未开放', {
						icon: 1
					})
					return
				}
				this.current = index
				this.$emit('selectTab', this.current)
			},
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02', //gcj02,
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: res => {

						that.centerPoint = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						that.getCurrentCity()
					},
					fail: res => {

						if (res.errMsg === 'getLocation:fail auth deny') {
							that.$toast.confirm({
								content: '为了更好服务。请授权获取您当前的地理位置',
								confirmText: '去设置',
								callback: result => {
									if (result) {
										uni.openSetting({

										})
									}
								}
							})
						} else {
							that.$toast.alert({
								content: res.errMsg,
								callback: result => {

								}
							})
						}
					}
				})
			},
			getCurrentCity() { //获取城市name和id
				let that = this
				that.$httpRequest.get({
					that: that,
					url: 'wechat/positionToCityTencent',
					params: {
						"lal": that.centerPoint.latitude.toString() + ',' + that.centerPoint.longitude.toString()
					},
					success: res => {
						if (res.code === that.$httpConfig.SUCCESS_CODE) {
							setTimeout(() => {
								that.$toast.msg('获取当前定位为（' + res.data.countyName + "）", {
									icon: 1
								})
							}, 150)
							//新增经纬度
							let localobj = {
								latitude: that.centerPoint.latitude,
								longitude: that.centerPoint.longitude,
								name: res.data.countyName,
								id: res.data.countyId,
								cityId: res.data.cityId,
							}
							that.setAreaId(localobj)
						} else {
							that.$toast.alert({
								content: res.message,
								callback: result => {

								}
							})
						}
					}
				})
			},
			toLocationList() {
				uni.navigateTo({
					url: '/pages/my/locationList'
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/my/search'
				})
			}
		},

	};
</script>

<style scoped lang="scss">
	//顶部导航栏
	.back_img {
		width: 58upx;
		height: 58upx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.head {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 5;
		height: 88rpx;

		.warp {
			width: 100%;
			height: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			font-size: 0;
		}

		.location {
			width: 48rpx;
			height: 48rpx;
		}

		.search {
			width: 36rpx;
			height: 36rpx;
		}

		.nav-tab {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 350rpx;

			.nav-item {
				font-size: 30rpx;
				font-weight: normal;
				line-height: 32rpx;
				color: #666666;
				text-align: center;
				position: relative;
			}

			.active {
				font-weight: 500;
				color: #000000;

				&:after {
					content: "";
					width: 52rpx;
					height: 6rpx;
					border-radius: 100rpx;
					position: absolute;
					bottom: -16rpx;
					transform: translateX(-50%);
					left: 50%;
					background: #EC6A0A;
				}
			}
		}
	}
</style>